import React, { Component } from 'react'
import {
    NavLink
} from 'react-router-dom'
import { AppstoreOutline,KoubeiFill,FileOutline,UserOutline } from 'antd-mobile-icons'
export default class Footer extends Component {
    state = {
        footerList: [
            {
                icon: <AppstoreOutline />,
                name: '美洽',
                path: '/app/home'
            }
            ,
            {
                icon: <KoubeiFill />,
                name: '商城',
                path: '/app/shop'
            },
            {
                icon: <FileOutline />,
                name: '科普',
                path: '/app/list'
            },
            {
                icon: <UserOutline />,
                name: '我的',
                path: '/app/my'
            }
        ]
    }
    render() {
        const { footerList } = this.state
        return (
            <div className="footer-box">
                {
                    footerList.length && footerList.map((item, idx) => {
                        return <NavLink key={idx} to={item.path}>
                            <p>{item.icon}</p>
                            <p>{item.name}</p>
                        </NavLink>
                    })
                }
            </div>
        )
    }
}
